<!-- 模态框 -->
<template>
  <div class="modal-wrapper" v-show="visible" @click.self="closeModal">
    <div class="modal">
      <div class="header">
       <!-- <h2>{{ title }}</h2> -->
	   <h2>模态框</h2>
        <button @click="closeModal">model</button>
      </div>
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
 
<script>
  import { ref } from "vue";
 
  export default {
    name: "Modal",
    props: {
      title: {
        type: String,
        required: true,
      },
    },
    setup(props, { emit }) {
      const visible = ref(false);
 
      const openModal = () => {
        visible.value = true;
      };
 
      const closeModal = () => {
        visible.value = false;
        emit("close");
      };
 
      return {
        visible,
        openModal,
        closeModal,
      };
    },
  };
</script>
 
<style scoped>
  .modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
 
  .modal {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
  }
 
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
 
  .header h2 {
    margin: 0;
  }
 
  .header button {
    border: none;
    background-color: transparent;
    font-size: 20px;
    cursor: pointer;
  }
 
  .content {
    max-height: 400px;
    overflow: auto;
  }
</style>